<script setup>
import { NodeToolbar } from "@vue-flow/node-toolbar";

const props = defineProps({
  node: { type: Object, required: true },
});
</script>

<template>
  <div class="node-box">
    <div class="round-dot"></div>
    <!-- <NodeToolbar :is-visible="props.node.selected" position="top">
    </NodeToolbar> -->
    <div
      class="handle output"
      :data-handle-id="props.node.source"
      data-handlepos="top"
    ></div>
  </div>
</template>

<style scoped>

.node-tool-bar{
  border-radius: 6px;
}

.node-box {
  background: white;
  border-radius: 6px;
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 1px 1px 6px lightgray;
  overflow: hidden;
}
.round-dot {
  width: 10px;
  height: 10px;
  background: #ff523f;
  border-radius: 50%;
}

.handle {
  width: 5px;
  height: 5px;
  background: #b3b3b3;
  border: 1px solid white;
  border-radius: 50%;
  position: absolute;
}

.output {
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
}
</style>